<template>
  <div>
    <div class="header">
      <a href="/home">
        <i class="el-icon-video-camera"></i>
        <span class="tinyvideo">Six 微视频</span>
      </a>
      <el-dropdown @command="handleCommand">
        <span class="el-dropdown-link">
          {{user.nickname}}
          <i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <!-- <el-dropdown-item icon="el-icon-switch-button" command="a">首页</el-dropdown-item> -->
          <el-dropdown-item icon="el-icon-switch-button" command="b">个人中心</el-dropdown-item>
          <el-dropdown-item icon="el-icon-switch-button" command="c">历史记录</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>


<script>
import {getUserInfo,logout} from "@/api/login"
export default {
  data() {
    return{
      user:[]
    }
  },

  created(){
    this.userinfo();
  },
  methods: {
    userinfo(){
        getUserInfo().then(response=>{
          console.log(response)
          this.user =response.data.data.user;
        })
    },
    handleCommand(command) {
      switch (command) {
        case "a":
          this.$router.push({ path: "/login" });
          break;
        case "b":
          break;
         case "c":
          break; 
        default:
          break;
      }
    }
  }
};
</script>
<style scoped>
.header {
  position: absolute;
  height: 160px;
  background: url('../../../assets/title.png') no-repeat center center;
  top: 0px;
  left: 0px;
  right: 0px;
}
.el-icon-video-camera {
  font-size: 40px;
  color: white;
  vertical-align: middle;
  line-height: 40px;
  padding: 10px 20px 0 100px;
}
.tinyvideo {
  position: absolute;
  top:20px;
  color: white;
}
.el-dropdown {
  clear: both;
  float: right;
  top: 20px;
  margin-right: 40px;
  color: white;
  cursor: pointer;
}
.el-icon-arrow-down {
  font-size: 12px;
}
</style>